<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page contentType="text/html;charset=utf-8" language="java"%>
<%
	String baseP = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ "/";
%>

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <title>居住证办理点查询</title>
    <link href="<c:url value='/static/common/css/mobiscroll.core-2.5.2-min.css'/>" rel="stylesheet" type="text/css"/>
    <link href="<c:url value='/static/common/css/mobiscroll.android-ics-2.5.2-min.css'/>" rel="stylesheet" type="text/css"/>
    <link type="text/css" href="<c:url value='/static/common/css/wechat-common.css'/>" rel="stylesheet"/>
    <style type="text/css">
        .main {
            font-size: 1.6em;
            margin: 8px;
        }
        .main .form {
            height: 50px;
            line-height: 50px;
            border: 1px solid #dddddd;
            width: 100%;
            border-top: 0;
        }
        .main .boder-top {
            border-top: 1px solid #dddddd
        }
        .border_top_radius {
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
        }
        .border_bottom_radius {
            border-bottom-left-radius: 3px;
            border-bottom-right-radius: 3px;
        }
        .main .form .label {
            height: 50px;
            line-height: 50px;
            color: #157dfb;
            text-indent: 0.8em;
            float: left;
            width: 80px;
        }
        .main .form .element {
            height: 50px;
            line-height: 50px;
            margin-left: 85px;
            display: block;
        }
        .main .form .element input {
            color: #666;
            font-family: "微软雅黑", serif;
            text-indent: 0.3em;
            border: 0;
            width: 98%;
            font-size: 1.0em;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .main .btn:active {
            background-color: #3300ff;
            cursor: hand;
        }
        #result {
            min-height: 6em;
            margin: 10px 10px;
            line-height: 2;
            height: 2em;
            color: #837D7D;
        }
        .main .uptop {
            margin-top: -1.6em;
        }
        .main .form input {
            border: none;
            font-size: 1.1em;
            color: #a28d8d;
        }

        .main .searchbom {
            border: 1px solid rgb(182, 176, 176);
            border-bottom: none;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            margin-bottom: 0;
        }
        .main .other {
            border-radius: 0;
            margin-top: 0;
            margin-bottom: 0;

        }
        .main .searchtop {
            border-top-right-radius: 0;
            border-top-left-radius: 0;
            margin-top: 0;
            border-top: none;
        }
        #pol_station, #pol_office {
            display: none;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="form  boder-top border_top_radius">
        <label class="label" for="pol_area">区属</label>
        <select class="element" id="pol_area">
            <option>请选择</option>
        </select>
    </div>
    <div class="form other">
        <label class="label" for="pol_station">派出所</label>
        <select class="element" id="pol_station"></select>
    </div>
    <div class="form searchtop border_bottom_radius">
        <label class="label" for="pol_office">警务室</label>
        <select class="element" id="pol_office"></select>
    </div>
    <div><a id="btn_query" class="btn simple no-border">查 询</a></div>
    <div id="result" style="display: none;">
        <!-- <div>
             <span>分局电话：</span>
             <span id="fjdh"></span>
         </div>
         <div>
             <span>派出所电话：</span>
             <span id="pcsdh"></span>
         </div>-->
        <div>
            <span>警务室地址：</span>
            <span id="bgsdz"></span>
        </div>
        <div>
            <span>警务民警：</span>
            <span id="jwmj"></span>
        </div>
        <div>
            <span>警号：</span>
            <span id="jh"></span>
        </div>
        <div>
            <span>联系电话：</span>
            <span id="lxdh"></span>
        </div>
    </div>
</div>

<script src="<c:url value='/static/theme/police/js/jquery-2.1.1.min.js'/>" type="text/javascript"></script>
<script src="<c:url value='/static/theme/police/js/common.js'/>" type="text/javascript"></script>
<script src="<c:url value='/static/theme/police/js/mobiscroll.core-2.5.2-min.js'/>" type="text/javascript"></script>
<script src="<c:url value='/static/theme/police/js/mobiscroll.datetime-2.5.1-min.js'/>" type="text/javascript"></script>
<script src="<c:url value='/static/theme/police/js/mobiscroll.select-2.5.1-min.js'/>" type="text/javascript"></script>
<script type="text/javascript">
    var currPoliceOffice;//当前选中警务室
    var currPoliceOfficeList;//当前警务室集合
    var currStation;//当前选中派出所
    var currStationList;//当前派出所集合
    $(function () {
        //级联初始化
        //区属
        $.ajax({
            url: "http://221.224.13.5:8190/econsole/api/query/police-bureaus",
            type: "get",
            timeout: 6000,
            success: function (resp) {
                var htmlArr = "";
                var resultData = resp.data;
                if (resultData) {
                    var _len = resultData.length;
                    for (var i = 0; i < _len; i++) {
                        htmlArr += '<option value="' + resultData[i].Id + '">' + resultData[i].Name + '</option> ';
                    }
                }
                $("#pol_area").empty().val("").append(htmlArr).scroller('destroy').scroller({
                    preset: "select",
                    theme: "android-ics light",
                    mode: "scroller",
                    display: "modal",
                    group: true,
                    width: 180,
                    rows: 5,
                    setText: '确定',
                    cancelText: '取消'
                }).change(function () {
                    loadPoliceStation($(this).scroller("getValue"));
                });
                loadPoliceStation(resultData[0].Id);
            },
            error: function (resp) {
                toast(resp, 2000);
            }
        });
        $("#btn_query").click(function () {
            if (currPoliceOffice) {
                document.getElementById("bgsdz").innerText = currPoliceOffice.StreetAdd;
                document.getElementById("jwmj").innerText = currPoliceOffice.PoliceMan;
                var _jh = currPoliceOffice.PoliceNum;
                document.getElementById("jh").innerText = _jh ? _jh : "";
                document.getElementById("lxdh").innerText = currPoliceOffice.Phone;
                $("#result").show();
            } else {
                toast("暂无数据");
            }
        });
        /**
         * 根据区域加载派出所
         * @constructor
         */
        function loadPoliceStation(regionId) {
            var _key = "police-station:" + regionId;
            var _cache = getObj(_key);
            if (_cache) {
                initPoliceStation(_cache.data);
                currStationList = _cache.data;
                currStation = _cache.data[0];
            } else {
                $.ajax({
                    url: "http://221.224.13.5:8190/econsole/api/query/police-stations/" + regionId,
                    type: "get",
                    timeout: 6000,
                    success: function (resp) {
                        var resultData = resp.data;
                        initPoliceStation(resultData);
                        currStationList = resultData;
                        //将当前信息缓存至本地
                        putObj(_key, resultData, 30 * 24 * 3600);
                    },
                    error: function (resp) {
                        toast(resp, 2000);
                    }
                });
            }
        }

        function initPoliceStation(stationList) {
            var htmlArr = "";
            var _len = stationList.length;
            if (_len > 0) {
                for (var i = 0; i < _len; i++) {
                    htmlArr += '<option value="' + stationList[i].Id + '">' + stationList[i].Name + '</option> ';
                }
            }
            $("#pol_station").empty().val("").append(htmlArr).show().scroller('destroy').scroller({
                preset: "select",
                theme: "android-ics light",
                mode: "scroller",
                display: "modal",
                width: 180,
                rows: 5,
                setText: '确定',
                cancelText: '取消'
            }).change(function () {
                var sel_item_val = $(this).scroller('getValue');
                var _len = currStationList.length;
                for (var i = 0; i < _len; i++) {
                    if (currStationList[i] && currStationList[i].Id == sel_item_val) {
                        currStation = currStationList[i];
                        break;
                    }
                }
                loadPoliceOffice(sel_item_val);
            });
            currStation = stationList[0];
            loadPoliceOffice(stationList[0].Id);
        }

        /**
         * 初化警务室信息
         * @param policeOfficeId 警务室ID
         */
        function loadPoliceOffice(policeOfficeId) {
            var _key = "police-office:" + policeOfficeId;
            var _cache = getObj(_key);
            if (_cache) {
                initPoliceOffice(_cache.data);
                currPoliceOfficeList = _cache.data;
            } else {
                $.ajax({
                    url: "http://221.224.13.5:8190/econsole/api/query/police-offices/" + policeOfficeId,
                    type: "get",
                    timeout: 6000,
                    success: function (resp) {
                        var resultData = resp.data;
                        if (resultData) {
                            initPoliceOffice(resultData);
                            currPoliceOfficeList = resultData;
                            //将当前信息缓存至本地
                            putObj(_key, resultData, 30 * 24 * 3600);
                        } else {
                            $("#pol_office,#pol_office_dummy").empty().val("");
                            $("#result").hide();
                            toast("暂无警务室数据")
                        }
                    },
                    error: function (resp) {
                        toast(resp, 2000);
                    }
                });
            }
        }

        function initPoliceOffice(dataList) {
            var htmlArr = "";
            var _len = dataList.length;
            if (_len > 0) {
                for (var i = 0; i < _len; i++) {
                    htmlArr += '<option value="' + dataList[i].guid + '">' + dataList[i].JWSName + '</option> ';
                }
            }
            $("#pol_office").empty().val("").append(htmlArr).show().scroller('destroy').scroller({
                preset: "select",
                theme: "android-ics light",
                mode: "scroller",
                display: "modal",
                width: 180,
                rows: 5,
                setText: '确定',
                cancelText: '取消'
            }).change(function () {
                var sel_item = $(this).scroller('getValue');
                var _len = currPoliceOfficeList.length;
                for (var i = 0; i < _len; i++) {
                    if (currPoliceOfficeList[i] && currPoliceOfficeList[i].guid == sel_item) {
                        currPoliceOffice = currPoliceOfficeList[i];
                        break;
                    }
                }
            });
            currPoliceOffice = dataList[0];
        }

        function putObj(key, data, expireSeconds) {
            var obj = {"key": key, "data": data, "expire": (new Date().getTime() + expireSeconds * 1000)};
            sessionStorage.setItem(key, JSON.stringify(obj));
        }

        function getObj(key) {
            var _item = sessionStorage.getItem(key);
            if (_item) {
                var obj = JSON.parse(_item);
                //判断是否过期，如果过期则返回null
                var _now = new Date().getTime();
                if (_now <= obj.expire) {
                    return obj;
                }
                return null;
            }
            return null;
        }
    });
</script>
</body>
</html>